<template>
  <div class="main">
    <app-bar>
      <div slot="title"><b>在线建立</b></div>
    </app-bar>
    <!-- 左边信息 -->
    <el-row class="infosarea">
      <el-col :span="18" class="xls-info">
        <div class="xls-info-area">
          <el-row>
            <el-col :span="24">
              <el-row><i class="iconfont ziwopingjia"></i><span>自我评价</span></el-row>
              <el-row class="enter-txt"><textarea type="text" class="text-area" placeholder="自我评价"/></el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-row><i class="iconfont gongzuojingyan"></i><span>工作经验</span></el-row>
              <el-row class="enter-txt"><textarea type="text" class="text-area" placeholder="自我评价"/></el-row>
            </el-col>
          </el-row>
          <div v-if="additem.length !== 0">
            <el-row v-for="(i, index) in additem" :key="index" >
              <el-col :span="24">
                <el-row>
                  <el-col :span="20"><i class="iconfont zidingyi"></i><input type="text" maxlength="8" minlength="2" v-model="i.title" placeholder="自定义模块"/></el-col>
                </el-row>
                <el-row class="enter-txt"><textarea type="text" class="text-area" v-model="i.content" placeholder="自定义内容"/></el-row>
              </el-col>
            </el-row>
          </div>
        </div>
        <el-row v-if="show">
          <el-col :span="24">
            <el-row>
              <el-col :span="16"><i class="iconfont zidingyi"></i><input type="text" maxlength="8" minlength="2" v-model="item.title" placeholder="自定义模块"/></el-col>
              <el-col :span="4" @click.native="delxls">delete<i class="iconfont"></i></el-col>
              <el-col :span="4" @click.native="savexls(item)">save<i class="iconfont"></i></el-col>
            </el-row>
            <el-row class="enter-txt"><textarea type="text" class="text-area" v-model="item.content" placeholder="自定义内容"/></el-row>
          </el-col>
        </el-row>
      </el-col>
      <!-- 右边信息 -->
      <el-col :span="6">
        <el-row>
          <el-col :span="24">
            头像
          </el-col>
        </el-row>
        <el-row class="personal">
          <ul>
            <li>基本信息</li>
            <li><i class="iconfont xingmingyonghumingnicheng"></i><input type="text" class="text-info" placeholder="姓名"/></li>
            <li><i class="iconfont nianling"></i><input type="number" class="text-info" placeholder="年龄"/></li>
            <li><i class="iconfont dianhua"></i><input type="tel" class="text-info" placeholder="电话"/></li>
            <li><i class="iconfont youxiang"></i><input type="email" class="text-info" placeholder="邮箱"/></li>
          </ul>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="add-btn">
      <el-col :span="2" :offset="14">
        <i @click="addxls" class="iconfont">+ 添加</i>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="commit-area">
        <el-button type="primary" round @click="printIntro('f')">导 出 PDF</el-button>
        <el-button type="primary" round @click="printIntro('g')">导 出 PNG</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'

const path = require('path')
const PDFDocument = require('pdfkit')
const fs = require('fs')

class Template {
  constructor (title, content) {
    this.title = title
    this.content = content
  }
}

export default {
  data () {
    return {
      num: 0,
      additem: [],
      show: false,
      item: {
        title: '',
        content: ''
      }
    }
  },
  methods: {
    addxls () {
      this.show = true
    },
    savexls (item) {
      const temp = new Template(item.title, item.content)
      this.additem.push(temp)
      this.show = false
      this.item.title = ''
      this.item.content = ''
    },
    delxls (index) {
      this.show = false
      this.item = {}
    },
    printIntro (flag) {
      const infosarea = document.querySelector('.infosarea')
      console.log('infosarea', infosarea)
      if (flag === 'f') {
        // 导出PDF
        console.log('导出 PDF')
        html2canvas(infosarea).then(canvas => {
          const filePath = path.join('D:/', new Date().getTime() + '.pdf')
          console.log('filePath', filePath)
          const imgData = canvas.toDataURL('image/png', 1.0)
          const doc = new PDFDocument()
          const ws = fs.createWriteStream(filePath)
          doc.pipe(ws)
          doc.image(imgData, 10, 10, {width: 600, height: 300})
          doc.end()
          ws.on('finish', () => {
            alert('导出成功')
          })
        })
      }
      if (flag === 'g') {
        html2canvas(infosarea).then(canvas => {
          const filePath = path.join('D:/', new Date().getTime() + '.png')
          const imgData = canvas.toDataURL('image/png', 1.0)
          var base64Data = imgData.replace(/^data:image\/\w+;base64,/, '')
          var dataBuffer = Buffer.from(base64Data, 'base64')
          // const ws = fs.createWriteStream(filePath)
          // console.log('二进制流', dataBuffer)
          // ws.on('finish', () => {
          //   console.log('导出 png')
          // })
          // ws.write(dataBuffer)
          fs.writeFile(filePath, dataBuffer, (err) => {
            if (err) {
              console.log('err', err)
            }
            console.log('导出 png')
          })
        })
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.infosarea
  padding 1rem 2rem
.xls-info
  .xls-info-area
    max-height 50rem
    overflow-y auto
    margin-right .5rem
    .el-row
      margin 1rem 0
    .enter-txt
      .text-area
        display flex
        margin 0 auto
        width 90%
        min-height 5rem
        border .1rem solid #e0e0e0
        border-radius .2rem
  .add-btn
    text-align right 
    padding-right 3rem
    line-height 4rem
.personal
  li 
    margin 2rem 0
    .text-info
      border-bottom .1rem solid #d0d0d0  
      padding-left .5rem
.commit-area
  display flex
  justify-content center
  margin-top 4rem
</style>
